import { Button, Form, Space, UploadFile } from 'antd';
import { useEffect } from 'react';
import type { AliOssProviderValue } from 'ym-design';
import { YmAliOssFilePathRuleProvider, YmUpload, useYmAliOss } from 'ym-design';

function UploadWithForm() {
  type FormValue = {
    imglist: UploadFile<string>[];
    imgInit: UploadFile<string>[];
    alioss: UploadFile<string>[];
    img1: [UploadFile<string>];
    img2: [UploadFile<string>];
  };

  const ossProps = useYmAliOss('test');
  const [form] = Form.useForm<FormValue>();

  // 如果有初始化值一般需要转化以后才可以使用
  useEffect(() => {
    setTimeout(() => {
      // 简单模拟下异步请求接口
      const data = {
        imglist:
          'https://logibeat-test.oss-cn-hangzhou.aliyuncs.com/MegatronWeb/default/test/202304/20230415_0950_2f4d7a4378f54d23bcd18ace106250bd_Web.jpeg,' +
          'https://logibeat-test.oss-cn-hangzhou.aliyuncs.com/MegatronWeb/default/test/202304/20230415_0950_2f4d7a4378f54d23bcd18ace106250bd_Web.jpeg,' +
          'https://logibeat-test.oss-cn-hangzhou.aliyuncs.com/MegatronWeb/default/test/202304/20230415_0950_2f4d7a4378f54d23bcd18ace106250bd_Web.jpeg,' +
          'https://logibeat-test.oss-cn-hangzhou.aliyuncs.com/MegatronWeb/default/test/202304/20230415_0950_2f4d7a4378f54d23bcd18ace106250bd_Web.jpeg,' +
          'https://logibeat-test.oss-cn-hangzhou.aliyuncs.com/MegatronWeb/default/test/202304/20230415_0950_2f4d7a4378f54d23bcd18ace106250bd_Web.jpeg,' +
          'https://logibeat-test.oss-cn-hangzhou.aliyuncs.com/MegatronWeb/default/test/202304/20230415_0950_e1b26ef8cf214cc0a823bc9bc2a22949_Web.jpeg',
      };

      form.setFieldsValue({
        imglist: data.imglist.split(',').map((v) => {
          return { uid: Math.random() + '', url: v };
        }),
      });
    }, 1000);
  }, []);

  return (
    <div>
      <Form<FormValue>
        form={form}
        onFinish={(value) => {
          console.log(value);
          // 提交时需要处理一下对应的字段
          const { imglist, ...rest } = value;
          const params = {
            imglist: imglist
              .map((v) => {
                return v.response ?? v.url;
              })
              .join(','),
            ...rest,
          };
          console.log(params);
        }}
      >
        <Form.Item
          label="提交时需要自行转化"
          name="imgInit"
          rules={YmUpload.formRules('图片必须上传')}
        >
          <YmUpload maxCount={3} cardWidth={200} cardHeight={126}>
            多数量使用
          </YmUpload>
        </Form.Item>
        <Form.Item
          name="imglist"
          label="有初始化值(imglist)"
          rules={YmUpload.formRules()}
        >
          <YmUpload maxCount={3} cardWidth={200} cardHeight={126}>
            有初始化值的使用
          </YmUpload>
        </Form.Item>
        <Form.Item label="单张独立使用">
          <Space size={8}>
            <Form.Item name="img1" noStyle>
              <YmUpload cardWidth={200} cardHeight={126} maxCount={1}>
                上传行驶证正本
              </YmUpload>
            </Form.Item>
            <Form.Item name="img2" noStyle>
              <YmUpload cardWidth={200} cardHeight={126} maxCount={1}>
                上传行驶证副本
              </YmUpload>
            </Form.Item>
          </Space>
        </Form.Item>
        <Form.Item label="上传至alioss,路径为test" name="alioss">
          <YmUpload maxCount={3} cardWidth={200} cardHeight={126} {...ossProps}>
            使用aliyunoss进行提交
          </YmUpload>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}

const DEFAULTCONFIGFORPREVIEW: AliOssProviderValue = {
  system: 'Web',
  phone: '12358167307',
  client: 'Boss',
  region: 'oss-cn-hangzhou',
  bucket: 'logibeat-test',
  accessKeyId: '..',
  accessKeySecret: '...',
};

export default function () {
  return (
    <YmAliOssFilePathRuleProvider value={DEFAULTCONFIGFORPREVIEW}>
      <UploadWithForm />
    </YmAliOssFilePathRuleProvider>
  );
}
